import Guide from '~/components/layout/guide'
import Link from '~/components/text/link'
import Caption from '~/components/text/caption'
import { InlineCode } from '~/components/text/code'
import Note from '~/components/text/note'

export const meta = {
  title: 'Upgrade Your Existing ZEIT Now Projects With Zero Configuration',
  description:
    'Upgrade your existing ZEIT Now projects to use no configuration.',
  published: '2019-07-31T20:06:26.000Z',
  authors: ['msweeneydev', 'timothy', 'skllcrn'],
  url: '/guides/upgrade-to-zero-configuration',
  editUrl: 'pages/guides/upgrade-to-zero-configuration.mdx',
  lastEdited: '2020-01-20T21:51:41.000Z'
}

With zero configuration, it's never been easier to deploy an app with ZEIT Now. This guide highlights a set of common scenarios, showing you how to take advantage of these new features.

## Next.js

In the first example, we will explore how to deploy [a Next.js app](/guides/deploying-nextjs-with-now) with zero configuration.

Using [the Next.js example project from the ZEIT Now repository](https://github.com/zeit/now/tree/master/examples/nextjs), the following `now.json` configuration file was previously needed to deploy:

```json
{
  "version": 2,
  "name": "my-nextjs-project",
  "builds": [
    { "src": "package.json", "use": "@now/next" },
    { "src": "backend/**/*.js", "use": "@now/node" }
  ]
}
```

<Caption>
  A previously required <InlineCode>now.json</InlineCode> configuration file.
</Caption>

### Next.js with Zero Configuration

With zero configuration, the `now.json` file is no longer required. You only have to remove the `now.json` file from your project.

For Next.js projects that have a **JavaScript API**, you can use a `/pages/api/` folder, this will allow Next.js to [handle the building of these files for you](https://nextjs.org/docs#api-routes).

If your Next.js project is using a different language for the API, put it in the top-level `/api` directory instead. By doing that, you will take advantage of ZEIT Now's native support for Serverless Functions written in multiple languages, while `/pages/api` only supports JavaScript (powered by Next.js).

View this zero configuration deployment on ZEIT Now: <https://next-zero-config.now-examples.now.sh/>

## Other Frameworks

Using frameworks other than Next.js with zero configuration is just as straightforward. For example, let's take a look at Gatsby.

Before zero configuration, the [Gatsby default starter](https://github.com/gatsbyjs/gatsby-starter-default) would require a `now.json` file like following:

```json
{
  "version": 2,
  "name": "my-gatsby-project",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "public" }
    }
  ]
}
```

<Caption>
  A previously required <InlineCode>now.json</InlineCode> configuration file.
</Caption>

### Frameworks with Zero Configuration

The above configuration is no longer required. Instead, for frontend frameworks like Gatsby or Next.js, ZEIT Now will locate the `build` script inside a `package.json` file at your project's root and use it to build and serve the output from the `public` directory.

A set of frontend frameworks are [optimized for Now](/docs/v2/build-step/#optimized-frameworks) with zero configuration. If the framework you are using is not, you must ensure that the build output directory is set to `public`.

If your framework does not support changing the output build directory, you can make an addition to your build script, moving the build output to the `public` folder manually like the example below:

```json
{
  "scripts": {
    "build": "jekyll build && mv _site public"
  }
}
```

<Caption>
  A <InlineCode>package.json</InlineCode> file used to build Jekyll and move the
  output directory to <InlineCode>public</InlineCode>.
</Caption>

In this example, after the build step is executed, the `_site` folder, generated by Jekyll, is renamed to `public`.

To check the output directory for your framework, run `npm run build` inside your project from the terminal, then check the root of your project directory for a newly created folder. Alternatively, your frameworks documentation should list it.

<Note>
  Add the build output directory{' '}
  <Link href="/guides/prevent-uploading-sourcepaths-with-nowignore">
    to <InlineCode>.nowignore</InlineCode>
  </Link>{' '}
  so that your project is rebuilt with each deployment.
</Note>

## APIs

Zero configuration makes it straightforward to deploy an API alongside a frontend project. Let's look at a [Go example](/docs/v2/serverless-functions/supported-languages#go) to illustrate the differences and see how zero configuration simplifies the process.

The following `now.json` was previously needed to deploy a [Go Serverless Function](/docs/v2/serverless-functions/introduction) in the `api` directory.

```json
{
  "name": "go-date",
  "version": 2,
  "builds": [
    {
      "src": "/api/date.go",
      "use": "@now/go"
    }
  ],
  "routes": [
    {
      "src": "/date",
      "dest": "api/date.go"
    }
  ]
}
```

<Caption>
  A previously required <InlineCode>now.json</InlineCode> configuration file.
</Caption>

With this setup, requiring a Runtime and Route, all requests made to `/date` will receive a response of the current date and time.

However, when writing multiple endpoints you will either require RegEx knowledge or be prepared to write a Route and Runtime for each and every endpoint.

### With Zero Configuration

Zero configuration for API's has one rule, put everything in a top level `/api` directory. From there, ZEIT Now will handle all of the building and routing for you.

In the example above, all that would be required is to move `/api/date.go` into the project's root directory and then simply deleting the `now.json` file.

After deleting the `now.json` file, the date function would then be available at `/api/date`, providing an API with filesystem based routing, all without requiring any configuration.

### Migrating Route Parameters

In some cases, your app may use route parameters in the `routes` property of a `now.json` file, this too can be done without configuration.

When using route parameters, a `now.json` file would have contained something similar to the following route:

```json
{
  ...
  "routes": [
    {
      "src": "/api/users/(?<user>)",
      "dest": "/api/users?user=$user"
    }
  ]
}
```

<Caption>
  Capturing a route parameter in a path and rewriting it to the intended
  destination.
</Caption>

Instead of defining configuration, you can use the filesystem to create the route for you, using Path Segments.

To use Path Segments using the example configuration's structure above, you only need to create a file within the `/api/users` directories called `[user].js` (including the square brackets, with any [supported language](/docs/v2/serverless-functions/supported-languages)). This will act as a Serverless Function that receives a query, but can be accessed through a path such as `my-zeit-domain.com/api/users/my-username`.

To use the information from a Path Segment, you can use your [languages](/docs/v2/serverless-functions/supported-languages) method for using query strings. For example, a [Node.js Serverless Function](/docs/v2/serverless-functions/supported-languages#node.js) would look like the following:

```js
module.exports = (req, res) => {
  res.send(`Hello ${req.query.user}!`)
}
```

<Caption>
  An example Node.js Serverless Function that uses Path Segments through{' '}
  <Link href="/docs/v2/serverless-functions/supported-languages#node.js-helpers">
    helper methods
  </Link>{' '}
  with ZEIT Now.
</Caption>

export default ({ children }) => <Guide meta={meta}>{children}</Guide>

export const config = {
  amp: 'hybrid'
}
